<script setup>
import { ElMessage } from 'element-plus'
import api from '../api'
import ImageUpload from "@/components/ImageUpload/index.vue";
import { clearObj } from "@/utils";
import { watch } from "vue";
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])
const visible = ref(false)
const success = ref(false)
const form = ref({})
const formRef = ref()

const open = async (patent_id) => {
  if (patent_id) {
    const res = await api.detail({ patent_id })
    form.value = res.data
  } else {
    form.value = clearObj(form.value)
  }
  visible.value = true
}

const handleClose = () => {
  emit('close')
  success.value && emit('success')
}

const close = () => {
  visible.value = false
}

const handleSubmit = async () => {
  const validator = await formRef.value.validate()
  if (!validator) return
  api[form.value.patent_id ? 'edit' : 'create']({ ...form.value, fee: form.value.fee.toFixed(2) }).then(res => {
    ElMessage.success('保存成功')
    success.value = true
    close()
  })
}

watch(() => form.value.patent_certificate_file, value => {
  if (value && value.length) formRef.value?.clearValidate('patent_certificate_file')
}, { deep: true })

watch(() => form.value.trademark_status, value => {
  if (value && value.length) formRef.value?.clearValidate('trademark_status')
}, { deep: true })

watch(() => form.value.tm_certificate_file, value => {
  if (value && value.length) formRef.value?.clearValidate('tm_certificate_file')
}, { deep: true })

defineExpose({ open })

</script>

<template>
  <el-dialog :close-on-click-modal="false" :title="form.epr_id ? '编辑专利信息' : '添加专利信息'" v-model="visible" align-center destroy-on-close width="1200px" @close="handleClose">
    <el-form ref="formRef" :model="form" label-position="top">
      <div class="grid grid-cols-3 gap-x-3">
        <el-form-item label="专利名称" prop="patent_name" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model="form.patent_name" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="证书序列号" prop="certificate_num" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model="form.certificate_num" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="发明人" prop="inventor">
          <el-input v-model="form.inventor" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="注册号" prop="registered_num">
          <el-input v-model="form.registered_num" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="地区" prop="region" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.region" :options="options.region" class="w-full" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="商标类型" prop="trademark_type" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.trademark_type" :options="options.trademark_type" class="w-full" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="注册产品" prop="registered_product" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model="form.registered_product" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="申请日期" prop="application_date" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <el-date-picker v-model="form.application_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="初审日期" prop="initial_review_date">
          <el-date-picker v-model="form.initial_review_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="异议截止日期" prop="opposition_deadline">
          <el-date-picker v-model="form.opposition_deadline" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="注册日期" prop="registration_date">
          <el-date-picker v-model="form.registration_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="专利截止日期" prop="patent_expiration_date">
          <el-date-picker v-model="form.patent_expiration_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="代理/办理机构" prop="agent_agency" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model="form.agent_agency" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="合作日期" prop="cooperation_date" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <el-date-picker v-model="form.cooperation_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="历史代理/办理机构" prop="history_agent_agency">
          <el-input v-model="form.history_agent_agency" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="历史代理商合作日期" prop="history_cooperation_date">
          <el-date-picker v-model="form.history_cooperation_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="费用" prop="fee" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <v-group class="w-full">
            <el-input-number v-model="form.fee" controls-position="right" :min="0" :step="0.01" :precision="2" placeholder="请输入" class="flex-1" />
            <el-button>RMB</el-button>
          </v-group>
        </el-form-item>
        <el-form-item label="申请人/公司" prop="applicant_company" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <el-input v-model="form.applicant_company" />
        </el-form-item>
        <el-form-item label="" prop="product_image" class="col-span-3" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VUploadFile v-model="form.product_image" title="产品图片" :types="['jpg', 'png', 'jpeg', 'gif', 'pdf']">
          </VUploadFile>
        </el-form-item>
        <!-- <el-form-item label="" prop="patent_certificate_file" class="col-span-3">
          <VUploadFile v-model="form.patent_certificate_file" title="专利证书" :types="['jpg', 'png', 'jpeg', 'gif', 'pdf']">
          </VUploadFile>
        </el-form-item> -->
        <el-form-item label="商标状态" prop="trademark_status">
          <el-checkbox-group v-model="form.trademark_status">
            <el-checkbox v-for="(d, i) in options.trademark_status" :key="i" :label="d.value">{{ d.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="form.trademark_status && form.trademark_status.includes(1)" label="" prop="tm_certificate_file" class="col-span-3"
          :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VUploadFile v-model="form.tm_certificate_file" title="TM标证书文件" edit :types="['jpg', 'png', 'jpeg', 'gif', 'pdf']" required>
          </VUploadFile>
        </el-form-item>
        <el-form-item v-if="form.trademark_status && form.trademark_status.includes(2)" label="" prop="r_certificate_file" class="col-span-3"
          :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VUploadFile v-model="form.r_certificate_file" title="R标证书文件" edit :types="['jpg', 'png', 'jpeg', 'gif', 'pdf']" required>
          </VUploadFile>
        </el-form-item>
        <el-form-item label="续费备注" class="col-span-3">
          <el-input v-model="form.renewal_remark" type="textarea" show-word-limit :maxlength="800" :autosize="{ minRows: 5 }"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="handleSubmit(formRef)">保 存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>